<template>
	<view class="container">
			<u-icon name="arrow-left" size="35" @click="toback"></u-icon>
		
		<view class="dflex-c pos-r margin-bottom margin-top">
			<view class="portrait-box">
				<image class="border-radius-c" :src="userdata.avatar || 'http://101.35.142.191:8081/tem/touxiang.jpg'">
				</image>
			</view>
			<view class="margin-left-sm">
				<view>
					<text class="username" v-model="userdata.nickname">{{ userdata.nickname|| 'cupker' }}</text>
				</view>
			</view>
		</view>
		<view class="use-item padding-lr dflex-b">
			<text class="tac">昵称</text>
			<text style="flex-grow: 0.7; font-size: 14px;" v-if='!NicknameChange'
				v-model="userdata.nickname">{{ userdata.nickname ||'还没有昵称' }}</text>
			<input style="flex-grow: 0.7;" v-if='NicknameChange' v-model='nick' placeholder="输入新昵称" />
			<text @click="change_nickname" class='change' v-if='!NicknameChange'>修改</text>
			<text @click="NicknameOk" v-else class='change'>确认</text>
		</view>
		<view class="gap"></view>
		<view class="use-item padding-lr" style="height: 300rpx;">
			<text class="tac" >头像</text>
			<u-upload @on-choose-fail="onChooseFail" ref="uUpload" 
				 action="http://101.35.142.191:3000" :file-list="fileList"
				  max-count="1" :form-data='formdata' :auto-upload='false'
				:before-upload='bful'>
				
			</u-upload>
			<text class="change" @click="changeimg"> 更换</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member'])
		},
		data() {
			return {
				NicknameChange: false,
				nick: '',
				userdata: {},
				formdata: {
					name: ''
				},
				fileList: [],
				id:''
			};
		},

		onLoad() {
			this.id=this.$api.getuid();
			uniCloud.database('cupkdemo').collection('uni-id-users').where({
				username: this.id
			}).get().then((res) => {
				this.userdata = res.result.data[0];
			})

		},
		onShow() {
			if (!this.islogin) {
				this.$api.msg('账号未登录');
				return;
			}
		},
		methods: {
			toback(){
				uni.switchTab({
					url:'../../tabbar/user'
				})
				console.log('ok')
			},
			bful(){
				this.formdata.name = this.id;
			},
			changeimg(){
				this.$refs.uUpload.upload();
				let files = this.$refs.uUpload.lists;
				let houzhui=files[0].file.name.slice(-4)
				const av='http://101.35.142.191:8081/uploads/userimgs/'+this.id+houzhui;
				uniCloud.database().collection('uni-id-users').where({
					username:this.id
				}).update({
					avatar:av
				}).then(()=>{
					uni.showToast({
						icon:'none',
						title:'头像修改成功'
					})
				})
			},
			NicknameOk() {
				const id = this.$api.getuid();
				uniCloud.database('cupkdemo').collection('uni-id-users').where({
					username: id
				}).update({
					nickname: this.nick
				}).then((res) => {
					uni.showToast({
						title: '修改成功！',
						icon: 'none'
					})
				})
				setTimeout(() => {
					this.NicknameChange = false;
					uni.redirectTo({
						url:'../../tabbar/user'
					})
				}, 1000)
			},
			change_nickname() {
			this.NicknameChange = !this.NicknameChange
		}
		},
		
	}
</script>

<style lang='scss'>
	.change {
		color: #C0C0C0;
		font-size: 12rpx;
	}

	page {
		background: $page-color-base;
	}

	image {
		width: 130rpx;
		height: 130rpx;
	}

	.use-item {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		position: relative;
		background: #fff;
		display: inline-flex;
		align-content: space-around;
	}
</style>
